/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import styled from 'styled-components';
import { applyUserManual } from '../../../api/index';
import { getToken } from '../../../utils/auth';

export default class UserManual extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '用户手册',
      imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
      userManualDetails: [],
      curTabIndex: 0,
      curMenuIndex: 0,
      type: undefined
    };
  }

  componentWillMount() {
    console.log(JSON.stringify(this.props.navigation.state.params.key), 31);
    this.setState({ type: +this.props.navigation.state.params.key });
    getToken().then(token => {
      applyUserManual(token, '', this.state.type).then(res => {
        if (res.code === '0') {
          this.setState({ userManualDetails: res.data });
          console.log(this.state.userManualDetails);
        }
      });
    });
  }
  componentDidMount() {}
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#fff'
        }}>
        <Title>{this.state.type === 0 ? '用户手册' : '执法宝典'}</Title>
        <View
          style={{
            flexDirection: 'row',
            borderColor: '#E6E6E6',
            borderTopWidth: 0.5,
            borderBottomWidth: 0.5
          }}>
          {this.state.userManualDetails.map((v, _idx) => (
            <Text
              onPress={() => {
                this.setState({ curTabIndex: _idx, curMenuIndex: 0 });
              }}
              style={{
                width:
                  (100 / this.state.userManualDetails.length).toFixed(2) + '%',
                height: 40,
                lineHeight: 40,
                textAlign: 'center',
                color: this.state.curTabIndex === _idx ? '#826CF5' : '#333',
                borderBottomColor:
                  this.state.curTabIndex === _idx ? '#826CF5' : '#fff',
                borderBottomWidth: this.state.curTabIndex === _idx ? 1 : 0
              }}>
              {v.beParentName}
            </Text>
          ))}
        </View>
        <View style={{ flexDirection: 'row' }}>
          <ScrollView style={{ width: 120, height: '100%' }}>
            {this.state.userManualDetails.length > 0 &&
              this.state.userManualDetails[
                this.state.curTabIndex
              ].moduleNameVo.map((v, _idx) => (
                <Text
                  onPress={() => {
                    this.setState({ curMenuIndex: _idx });
                  }}
                  style={{
                    width: '100%',
                    height: 40,
                    lineHeight: 40,
                    textAlign: 'center',
                    backgroundColor:
                      this.state.curMenuIndex === _idx ? '#E6E6E6' : '#fff',
                    borderBottomColor: '#E6E6E6',
                    borderBottomWidth: 1
                  }}>
                  {v.beName}
                </Text>
              ))}
          </ScrollView>
          <View
            style={{
              width: '70%',
              height: '100%',
              padding: 20
            }}>
            <Text>
              {this.state.userManualDetails.length > 0 &&
                this.state.userManualDetails[this.state.curTabIndex]
                  .moduleNameVo[this.state.curMenuIndex].beExplain}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  normalText: {
    height: 80,
    lineHeight: 40,
    color: '#000',
    textAlign: 'center'
  }
});
const Title = styled.Text`
  width: 100%;
  height: 40;
  line-height: 40;
  text-align: center;
`;
